import React, { PureComponent, Fragment } from 'react';
import { Button, Menu, Icon, message, Modal, Carousel, Radio, Form, Card, Input, Switch, Checkbox, Row, Col, Divider } from 'antd';
import styles from './VideoCard.less';

class VideoCard extends PureComponent {
  state = {
    activeVideo: {},
    previewSrc: '',
  };

  constructor(props) {
    super(props);
    this.videoPreview = React.createRef();
  }

  componentDidMount() {
    const $video = this.videoPreview.current;
    $video.currentTime = 20;
    // const imgHeight = $video.clientHeight;
    // const imgWidth = $video.clientWidth;
    // console.log(imgHeight, imgWidth);
    // $video.crossOrigin = "Anonymous";
    // $video.addEventListener("canplaythrough", () => {
    //   const canvas = document.createElement("canvas");
    //   const ctx = canvas.getContext("2d");
    //   ctx.drawImage($video, 0, 0, imgWidth, imgHeight);
    //   const imgSrc = canvas.toDataURL("image/png");
    //   this.setState({ previewSrc: imgSrc });
    // });
  }

  render() {
    const { info, active } = this.props;
    return (
      <div className={`${styles.videoCard} ${active ? styles.active : ''}`}>
        <div className={styles.image}>
          <video ref={this.videoPreview} className={styles.videoPreview} src={info.src}>
            <track></track>
          </video>
          <div className={styles.previewIcon}>
            <Icon type="play-circle"></Icon>
          </div>
          {/* <img src={this.state.previewSrc} alt={info.title} /> */}
        </div>
        <div className={styles.content}>
          <div className={styles.title}>{info.title}</div>
          <div className={styles.desc}>{info.descrip}</div>
        </div>
      </div>
    );
  }
}
export default VideoCard;
